<template>
	<checkbox-group @change="handleChange">
		<label>
			{{textBefore}}
			<checkbox :color="color" :value="name" :disabled="disabled"
				:checked="mode=='boolean'?modalValue?true:false:name == modalValue" />
			{{textAfter}}
		</label>
	</checkbox-group>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	const props = defineProps({
		modalValue: {
			type: [String, Boolean],
			default: ''
		},
		mode: {
			type: String, //boolean string
			default: 'boolean'
		},
		textBefore: {
			type: String,
			default: ''
		},
		textAfter: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		color: {
			type: String, //boolean string
			default: '#0097ff'
		},
	})
	const emit = defineEmits(['change', 'update:modalValue'])
	const handleChange = (e) => {
		if (e.detail.value.length) {
			console.log("e.detail.value", e.detail.value[0])
			emit('update:modalValue', props.mode == 'boolean' ? true : e.detail.value[0])
			emit('change', {
				value: props.mode == 'boolean' ? true : e.detail.value[0]
			})
		} else {
			emit('update:modalValue', props.mode == 'boolean' ? false : '')
			emit('change', {
				value: props.mode == 'boolean' ? false : ''
			})
		}
	}
</script>